<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="apps">
    <h1>这里是客户端</h1>
    <button @click="webSocket">连接服务器</button>
    <button @click="websocketclose">关闭连接</button>
    <br>
    <label for="input"><input id="input" type="text" v-model="sendMessage" ></label><br>
    <button @click="websocketsend(sendMessage)">广播给所有维修人员</button>
    <br>
    将消息发送给
    <label>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        号用户
    </label>
    <button>确定</button>
    <div id="message" >

    </div>

    <div id="ts" >

    </div>
    <h1>访问Controller</h1>
    <button @click="connectController()">访问controller</button>
</div>


</body>
</html>


<script>

    var app = new Vue({
        el: "#apps",
        data: {
            message:[],
            ts:[],
            sendMessage:{},
        },
        created:function (){
            this.initData();
            this.webSocket(); // 连接WebSocket
        },
        destroyed :function() {
            this.websocketclose();
        },

        methods: {
            initData:function(){
                this.message = [];
                this.ts = [];
            },
            connectController(){
                axios.post("http://localhost:8080/user/sendMessage");
            },
            say() {
                if (this.websock == null) {
                    alert("连接异常：null");
                    return 'null'
                }
                if(this.userInput===""){
                    this.tips('请输入聊天内容');
                }else{
                    this.tips('');
                }
                this.websocketsend(this.userInput);
                this.userInput = '';
            },
            webSocket :function() {
                // 建立socket连接
                //判断当前浏览器是否支持webSocket
                if ('WebSocket' in window) {
                    //这里websocket后面的参数格式为：
                    this.websock = new WebSocket("ws://localhost:8080/websocket/8");//与后端服务建立连接
                    console.log("连接服务器。。。。。。。。。。。。")
                } else {
                    alert('你的浏览器暂不支持websocket :(');
                }
                console.log(this.websock);
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen :function() {
                console.log("WebSocket连接成功");
                var data = '这是'+'user'+'，加入了连接';
                this.websocketsend(data)
            },
            websocketonerror :function(e) {
                this.tips("WebSocket连接发生错误");
                // console.log("WebSocket连接发生错误");
            },
            // 数据接收
            websocketonmessage :function(e) {
                // 显示消息内容
                this.setMessageInnerHTML(e.data);
            },
            // 数据发送
            websocketsend :function (data) {
                // this.tips("数据发送中...");
                this.websock.send(this.niming+": "+data)
            },
            websocketclose :function(e) {
                this.websock.close();
                this.tips("WebSocket连接关闭");
                console.log("connection closed (" + e + ")");// e.code
            },
            //将消息显示在网页上
            setMessageInnerHTML(msg) {
                document.getElementById('message').innerHTML += msg + '<br/>';
            },
            //提示信息显示在网页上
            tips (msg) {
                document.getElementById('ts').innerHTML = msg ;
            }
        }
    });
</script>